<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import { getColaDesc_c } from '@/api/lidare'
import { useRouter } from 'vue-router';
const router = useRouter()

const colaDescData = ref()
const descSwiper = ref()
const descVideo = ref()
const descInfo = ref()

onMounted(async () => {
    let { data } = await getColaDesc_c()
    colaDescData.value = data._data.data
    descSwiper.value = data._data.data.list[1].list
    descVideo.value = data._data.data.list[3]
    descInfo.value = data._data.data.list[4].list
    console.log(descInfo.value,'333');
    
    console.log(descSwiper.value, 'aaa');

    console.log(colaDescData.value.list[1].list, '222');

})



</script>

<template>
    <div class="cola-desc fixed-zbest">
        <div class="cola-desc-head">
            <van-icon name="arrow-left" size="20" @click.stop="$router.back()" class="back-icon" />
            <span class="cola-title">可乐优品商城介绍</span>
        </div>
        <div class="cola-desc-box">
            <img src="https://s1-1251010403.picgz.myqcloud.com/youpin/mall/coco/202003191419525997-h1.png" alt="">
            <van-swipe :autoplay="6000" lazy-render indicator-color="#fff">
                <van-swipe-item v-for="image in descSwiper" :key="image.cover">
                    <img :src="image?.cover" />
                </van-swipe-item>
            </van-swipe>
            <div>
                <img src="https://s1-1251010403.picgz.myqcloud.com/youpin/mall/coco/202003191420313243-a3.png" alt="">
                <div class="video-desc">
                    <video :src="descVideo?.url" controls autoplay :poster="descVideo?.cover"></video>
                </div>
            </div>
            <div class="desc-info-list">
                <div class="desc-info-item" v-for="item in descInfo" :key="item.cover">
                    <img :src="item?.cover" alt="">
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="scss">
.cola-desc {
    width: 100%;
    padding-bottom: .5rem;
    overflow: scroll;
    padding-top: .5rem;

    .cola-desc-head {
        width: 100%;
        height: .5rem;
        display: flex;
        align-items: center;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 30;
        background-color: #fff;

        .back-icon {
            margin-left: .12rem;
        }

        .cola-title {
            display: inline;
            font-size: .2rem;
            font-weight: 600;
            color: #222;
            margin-left: .85rem;
        }

    }

    .cola-desc-box {
        padding-bottom: .5rem;
    }

    .video-desc {
        position: relative;

        .cove-img {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 10;
        }
    }

    .desc-info-list {
        display: flex;
        flex-wrap: wrap;
    }

}
</style>